<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	body{
		font-family: SimHei,"微软雅黑",sans-serif;
	}
	.content-items li{
		list-style: none;
		float: left;
		padding: 4px 8px;
		margin: 5px;
		border: 1px #ededed solid;
		cursor: pointer;
		font-weight: 700;
		color: #666;
	}
	#savecreate{
		background-color: #003366;
		width: 30%;
		color: #FFFFFF;
		text-align: center;
		line-height: 40px;
		height: 40px;
		float: right;
	}
	.weui-uploader__input-box{
		width: 60px;
		height: 60px;
	}
	.weui-uploader__file{
		width: 60px;
		height: 60px;
	}
</style>
<body>
<nav class="mui-bar mui-bar-tab" style="height: 40px">
	<div th:if="${mk.stat==-2||mk.stat==-1}" id="savecreate" onclick="beforesubmit()">保存</div>
</nav>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>销售管理</b></font></h1>
</header>
<nav th:id="pro" class="mui-bar mui-bar-tab" style="display: none">
	<div class="content-items">
		<ul th:each="province:${province}">
			<li th:text="${province.dictname}" th:onclick="'javascript:choocepro(\''+${province.dictname}+'\')'">粤</li>
		</ul>
	</div>
</nav>
<div class="mui-content">
	<div class="weui-cells" style="margin-top: 0;position: fixed;z-index: 1000">
		<div class="weui-cell weui-cell_access" id="ccc" style="padding: 8px 15px">
			<div class="weui-cell__hd"><i class="fa fa-book" style="color: black;padding-right: 5px"></i></div>
			<div class="weui-cell__bd">
				<span style="font-size: 14px">服务项目</span>
				<input th:value="${serv.servitemname}" th:attr="data-values=${mk.servitem}" id="serv" type="text" style="border: none;width:70%;margin:0;padding:0;font-size: 14px;display: inline-block;text-align: right" readonly="readonly"/>
			</div>
			<div class="weui-cell__ft" id="servname"></div>
		</div>
		<div class="weui-cell weui-cell_access" style="padding:3px 15px">
			<div class="weui-cell__bd">
				<p style="color: black"><i class="fa fa-car" style="color: black;padding-right: 5px"></i>车牌号
					<span style="font-size: 16px;color: black;padding-bottom: 4px;margin-left: 40%" id="carpro" onclick="showpro()">粤</span>
					<input type="text" id='carno1' th:onchange="'javascript:savecarno()'" placeholder="请输入" style="border: none;width:25%;margin:0;padding:0;text-align: right;font-size: 16px" maxlength="7"/>
				</p>
				<input type="hidden" id="carno" th:value="${mk.carno}"/><!--存储读取的车牌号码-->
			</div>
			<div class="weui-cell__ft" ></div>
		</div>
	</div>
	<div class="weui-cells__title"></div>
	<div style="margin-top: 100px">
	<div class="weui-panel weui-panel_access" style="border-bottom:1px solid #999;margin-top: 0">
		<div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999;padding:10px 5px;">
			<div class="weui-flex__item" style="flex-grow: 1;padding: 3px 5px">
				<img style="width: 50px;height: 50px" class="weui-media-box__thumb" th:src="'/img/caricon/'+${custcar.brandlogo}"/>
			</div>
			<div class="weui-flex__item" style="flex-grow: 10;">
				<h4 class="weui-media-box__title" th:text="${custcar.carfactname}+' '+${custcar.carlinename}"></h4>
				<p class="weui-media-box__desc">
					<span th:text="${custcar.carvol}"></span>
					<span th:text="${custcar.caryear}"></span>
				</p>
			</div>
			<input id="cartype" type="hidden" th:value="${custcar.cartypeid}"/>
		</div>
		<div th:if="${custcar==null}">
			<a style="border-bottom:1px solid #999" class="weui-cell weui-cell_access" onclick="saveinfo()">
				<div class="weui-cell__bd">
					<p class="fff" th:data="1">您还没有选择客户车型</p>
				</div>
				<div class="weui-cell__ft">
					<p>请选择</p>
				</div>
			</a>
		</div>
	</div>
	<div class="weui-cells">
		<div class="weui-gallery" id="gallery" data-index="1">
			<span class="weui-gallery__img" id="galleryImg"></span>
			<div class="weui-gallery__opr">
				<a href="javascript:" rel="external nofollow" class="weui-gallery__del">
					<i class="weui-icon-delete weui-icon_gallery-delete"></i>
				</a>
			</div>
		</div>
		<!--<div class="weui-gallery" id="gallery2" data-index="2">-->
			<!--<span class="weui-gallery__img" id="galleryImg2"></span>-->
			<!--<div class="weui-gallery__opr">-->
				<!--<a href="javascript:" rel="external nofollow" class="weui-gallery__del2">-->
					<!--<i class="weui-icon-delete weui-icon_gallery-delete"></i>-->
				<!--</a>-->
			<!--</div>-->
		<!--</div>-->
		<!--<div class="weui-gallery" id="gallery3" data-index="3">-->
			<!--<span class="weui-gallery__img" id="galleryImg3"></span>-->
			<!--<div class="weui-gallery__opr">-->
				<!--<a href="javascript:" rel="external nofollow" class="weui-gallery__del3">-->
					<!--<i class="weui-icon-delete weui-icon_gallery-delete"></i>-->
				<!--</a>-->
			<!--</div>-->
		<!--</div>-->
		<div class="weui-cells__title" onclick="addfwcode(this)"><span><i style="margin-right: 5px" class="fa fa-plus-square-o"></i>新增防伪码</span></div>
		<div th:each="fwcode:${fwcodes}" class="weui-cell" style="padding: 5px 15px">
			<div class="weui-cell__bd">
				<p>防伪码</p>
			</div>
			<div class="weui-cell__ft">
				<input th:value="${fwcode.fwcode}" type="text" style="border: none;width:85%;margin:0;padding:0" readonly="readonly"/>
				<!--<i style="margin-top: 10px;margin-left: 10px" class="fa fa-minus-square-o mui-pull-right" onclick="delfwcode(this)"></i>-->
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--瓶身防伪标签</p>
						<div class="weui-uploader__info"><span class="photonum9">0</span>/<span class="maxphotonum9">3</span></div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles9" data-index="9">
							<li th:each="pic9:${pic9}" class="weui-uploader__file weui-uploader__file_status updatephoto9 " th:attr="data-picid=${pic9.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic9.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput9" data-index="9" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工小视频上传</p>
						<div class="weui-uploader__info"><span class="photonum4">0</span>/2</div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files4" id="uploaderFiles4">
							<li th:each="pic4:${pic4}" class="updatevideo4" style="position: relative;display: inline-block;height: 200px;width: 100px">
								<video th:attr="data-picid=${pic4.picid}" style="width: 100px;height: 180px;margin-right: 30px" autoplay="autoplay">
								<source class="updatevideo" th:src="@{'http://apis.ikartek.com/v1/imageservice/video/get?filename='+${pic4.picurl}}"/></video>
								<span style="font-size: 12px;position: absolute;left: 0;bottom: 0">
									施工前<i class="weui-icon-delete"  onclick="delvideo(this)"></i>
								</span>
							</li>
							<li th:each="pic5:${pic5}" class="updatevideo5" style="position: relative;display: inline-block;height: 200px;width: 100px">
								<video th:attr="data-picid=${pic5.picid}" style="width: 100px;height: 180px;margin-right: 30px" autoplay="autoplay">
									<source class="updatevideo" th:src="@{'http://apis.ikartek.com/v1/imageservice/video/get?filename='+${pic5.picurl}}"/></video>
								<span style="font-size: 12px;position: absolute;left: 0;bottom: 0">
									施工后<i class="weui-icon-delete" onclick="delvideo(this)"></i>
								</span>
							</li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput4" class="weui-uploader__input" type="file" accept="video/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--产品与车头</p>
						<div class="weui-uploader__info"><span class="photonum1">0</span>/3</div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles1" data-index="1">
							<li th:each="pic1:${pic1}" class="weui-uploader__file weui-uploader__file_status updatephoto1 " th:attr="data-picid=${pic1.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic1.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput1" data-index="1" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--服务检查表</p>
						<div class="weui-uploader__info"><span class="photonum2">0</span>/3</div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles2" data-index="2">
							<li th:each="pic2:${pic2}" class="weui-uploader__file weui-uploader__file_status updatephoto2" th:attr="data-picid=${pic2.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic2.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput2" data-index="2" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--技师加注</p>
						<div class="weui-uploader__info"><span class="photonum3">0</span>/3</div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles3" data-index="3">
							<li th:each="pic3:${pic3}" class="weui-uploader__file weui-uploader__file_status updatephoto3" th:attr="data-picid=${pic3.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic3.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput3" data-index="3" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--车厢面提示贴</p>
						<div class="weui-uploader__info"><span class="photonum6">0</span>/<span class="maxphotonum6">1</span></div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles6" data-index="6">
							<li th:each="pic6:${pic6}" class="weui-uploader__file weui-uploader__file_status updatephoto6" th:attr="data-picid=${pic6.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic6.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput6" data-index="6" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--车尾提示贴</p>
						<div class="weui-uploader__info"><span class="photonum7">0</span>/<span class="maxphotonum7">1</span></div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles7" data-index="7">
							<li th:each="pic7:${pic7}" class="weui-uploader__file weui-uploader__file_status updatephoto7" th:attr="data-picid=${pic7.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic7.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput7" data-index="7" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader">
					<div class="weui-uploader__hd">
						<p class="weui-uploader__title">施工现场图--车架号</p>
						<div class="weui-uploader__info"><span class="photonum8">0</span>/<span class="maxphotonum8">1</span></div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files" id="uploaderFiles8" data-index="8">
							<li th:each="pic8:${pic8}" class="weui-uploader__file weui-uploader__file_status updatephoto8" th:attr="data-picid=${pic8.picid}" th:style="'background-image:url(' + @{'/common/image?filename='+${pic8.picurl}} + ');'"></li>
						</ul>
						<div class="weui-uploader__input-box">
							<input id="uploaderInput8" data-index="8" class="weui-uploader__input image" type="file" accept="image/*" multiple="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="ddd" class="weui-cell weui-cell_access" style="padding: 5px 15px">
			<div class="weui-cell__bd">
				<p>用水量</p>
			</div>
			<div class="weui-cell__ft">
				<input id="waternum" th:value="${mk.waternum}" th:attr="data-values=${mk.waternum}" type="text" style="border: none;width:30%;margin:0;padding:0" readonly="readonly"/>
			</div>
		</div>
	</div>

	<div class="weui-cells">
		<div class="weui-cells__title">备注</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<textarea class="weui-textarea" id="textarea" rows="2" style="padding: 0px"></textarea>
				<div class="weui-textarea-counter"><span id="count">0</span>/50</div>
				<input type="hidden" id="remark" th:value="${mk.remark}"/>
			</div>
		</div>
	</div>
</div>
</div>
<input type="hidden" id="oid" th:value="${mk.oid}"/>

</body>
<link th:href="@{/keyboard/weiKeyBoard.css}" rel="stylesheet" />
<script type="application/javascript" th:src="@{/keyboard/weiKeyBoard1.0.js}"></script>
<script type="text/javascript">
    (function () {
        $(function () {
//            var keyBoard =new  weiKeyBoard($(".fwcode"),true,false,16);
            $(".fwcode").click(function () {
                var keyBoard =new  weiKeyBoard($(this),true,false,30);
                keyBoard.createKeyBoard();//创建键盘
            });
        });
    })();
</script>
<script>
    function fwcode($this) {
        var keyBoard =new  weiKeyBoard($($this),true,false,30);
        keyBoard.createKeyBoard();//创建键盘
    }
    function delfwcode($this) {
        $($this).closest(".weui-cell").remove();
    }
    function addfwcode($this) {
        var hh='<div class="weui-cell" style="padding: 5px 15px">' +
            '<div class="weui-cell__bd">' +
            '<p>防伪码</p>' +
            '</div>' +
            '<div class="weui-cell__ft">' +
            '<input onclick="fwcode(this)" class="fwcode" type="text" style="border: none;width:80%;margin:0;padding:0" readonly="readonly"/>' +
            '<i style="margin-top: 10px;margin-left: 10px" class="fa fa-minus-square-o mui-pull-right" onclick="delfwcode(this)"></i>' +
            '</div>' +
            '</div>';
        $($this).after(hh);
    }
	function saveinfo() {
		var serv=$("#serv").val();
		var carno=$("#carno").val();
        var storage=window.localStorage;
		if(serv!=null){
            storage.setItem("serv",serv);
            var servid=$("#serv").data("values");
            storage.setItem("servid",servid);
		}
        if(carno!=null){
            storage.setItem("carno",carno);
        }
        location.href="/person/addcar?flag=3"
    }
    function loadinfo() {
        var storage=window.localStorage;
        var serv=storage.getItem("serv");
        var carno=storage.getItem("carno");
        if(serv!=null){
            $("#serv").val(serv);
            var servid=storage.getItem("servid");
            $("#serv").data("values",servid);
        }
        if(carno!=null){
			var carpro=carno.substring(0,1);
			var carnum=carno.substring(1);
			$("#carpro").text(carpro);
			$("#carno1").val(carnum);
			$("#carno").val(carno);
        }
    }
    /*弹出车牌的省份*/
    function showpro() {
        $("#pro").removeAttr("style");
    }
    /*选择车牌省份后赋值过去*/
    function choocepro(province) {
        $("#carpro").text(province);
        $('#pro').attr("style","display:none");
    }
    function savecarno() {
        var carpro = $("#carpro").text();
        var carno = $("#carno1").val().toUpperCase();
        $("#carno1").val(carno);
        var flag = carpro + carno;
//        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
//        var result = express.test(flag);
//        if (result == false) {
//            $.alert('请输入正确的车牌号!')
//        } else {
            $("#carno").val(flag);
//		}
    }
    $("#serv").select({
        title: "选择服务项目",
        items: [{
            title: ""
        }]
    });
    function loadserv() {
        $.showLoading("加载服务项目中...");
        mui.ajax('/sale/loadserv', {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            success: function (json) {
                var data=json.result;
//                var items= [{
//                    title: ""
//                }]
                $("#serv").select("update", { items:data });
            }
        });
        $.hideLoading();
    }
    $("#ccc").click(function () {
        $("#serv").select("open");
    });
    $("#ddd").click(function () {
        $("#waternum").select("open");
    });
    $("#waternum").select({
        title: "选择用水量",
        items:
            [
                {
                    title: "4L",
                    value:"4L"
                },
                {
                    title: "5L",
                    value:"5L"
                },
                {
                    title: "6L",
                    value:"6L"
                },
                {
                    title: "7L",
                    value:"7L"
                },
                {
                    title: "8L",
                    value:"8L"
                },
                {
                    title: "9L",
                    value:"9L"
                },
                {
                    title: "10L",
                    value:"10L"
                },
                {
                    title: "11L",
                    value:"11L"
                },
                {
                    title: "12L",
                    value:"12L"
                }
            ]
    });
    $(document).ready(function () {
        loadserv();
        loadinfo();
		var carno=$("#carno").val();
        if(carno!=""){
            var carpro=carno.substring(0,1);
            var carnum=carno.substring(1);
            $("#carpro").text(carpro);
            $("#carno1").val(carnum);
            $("#carno").val(carno);
        }
        //备注
        var remark = $("#remark").val();
        var contentformat = remark.replace(/\n/g,'<br/>');
        $("#textarea").html(contentformat);
        //图片数量
		for(var i=0;i<=9;i++){
            var picnum=$(".updatephoto"+i).length;
            $(".photonum"+i).text(picnum);
		}
        var vnum4=$(".updatevideo4").length;
        var vnum5=$(".updatevideo5").length;
        $(".photonum4").text(parseInt(vnum4)+parseInt(vnum5));
        var len=contentformat.length;
        $("#count").text(len);
	})
</script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //加载图片(生成base64)
    $(function () {
        var index; //第几张图片
        var photokind;//哪一类
		//浏览图片
        $(".weui-uploader__files").on("click", "li", function() {
            photokind=$(this).parents().data("index");
            index = $(this).index();
            $("#galleryImg").attr("style", this.getAttribute("style"));
            $("#gallery").fadeIn(100);
            $.toast("请轻触屏幕返回", 1000);
        });
        $("#galleryImg").on("click", function() {
            $("#gallery").fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            $.confirm({
                title: '确认删除',
                text: '删除后不可撤回，请问是否继续删除',
                onOK: function () {
                    $.showLoading('正在删除...');
                    var li=$("#uploaderFiles"+photokind).find("li").eq(index);
                    var picid=li.data("picid");
                    if(picid!=undefined) {
						$.ajax({
							url: "/sale/delsalepic?picid="+picid,
							type: 'POST',
							async: false,//同步提交，等ajax代码执行后再往下执行代码
							contentType: 'application/json',
							success: function (data) {
                                li.remove();
                                var num=parseInt($(".photonum"+photokind).text())-1;
                                $(".photonum"+photokind).text(num);
                                $("#gallery").fadeOut(100);
							},
							error: function (data) {
								$.alert("删除图片失败,请重试");
							}
						});
                    } else {
                        li.remove();
                        var num=parseInt($(".photonum"+photokind).text())-1;
                        $(".photonum"+photokind).text(num);
                        $("#gallery").fadeOut(100);
					}
                    $.hideLoading();
                },
                onCancel: function () {
                }
            });

        });
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        // 1024KB，也就是 1MB
        var maxSize = 3072 * 3072;
        // 图片最大宽度
        var maxWidth = 10000;
        // 最大上传图片数量
        $('.image').on('change', function (event) {
            photokind=$(this).data("index");
            var files = event.target.files;
            var maxCount = $(".maxphotonum"+photokind).text();
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new FileReader();
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    $.alert("该类型不允许上传！", "警告！");
                    continue;
                }
                if (file.size > maxSize) {
                    //$.weui.alert({text: '图片太大，不允许上传'});
                    $.alert("图片太大，不允许上传", "警告！");
                    continue;
                }
                if (parseInt($('.photonum'+photokind).text())>= maxCount) {
                    $.alert("最多只能上传"+maxCount+"张图片");
                    return;
                }
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    $.showLoading("正在加载中...");
                    //console.log(e);
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
//                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
//                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var obase64 = canvas.toDataURL('image/jpeg',0.5);
                        // 插入到预览区
                        var $preview = $('<li class="weui-uploader__file weui-uploader__file_status filekind'+photokind+' countkind" style="background-image:url(' + obase64 + ')"></li>');
                        $('#uploaderFiles'+photokind).append($preview);
                        var num = $('.filekind'+photokind).length;
                        $('.photonum'+photokind).text(num);
                        $.hideLoading();
                    };
                };
            }
        });
    });
    /*]]>*/
    /*评论字数减少*/
    $(function(){
        var max = 50;
        $('#textarea').on('input', function(){
            var text = $(this).val();
            var len = text.length;
            $('#count').text(len);
            if(len > max){
                var num = $('#textarea').val().substr(0, 50);
                $('#textarea').val(num);
                $.alert('您好,超字数限制！');
            }
        });
    });

    function beforesubmit() {
		var flag=true;
		if($("#serv").val()==""){
		    flag=false;
			$.alert("请先选择服务项目");
		}
        if($("#carno").val()==""){
            flag=false;
            $.alert("请先填写车牌号");
        }
        if($("#custcarid").val()==""){
            flag=false;
            $.alert("请先选择客户车型");
        }
        if($(".fwcode").val()!=""){
            $(".fwcode").each(function () {
                var fwcode=$(this).val();
                $.ajax({
                    url: "/sale/checkfw?fwcode="+fwcode,
                    type: 'POST',
                    async:false,
                    contentType: 'application/json',
                    success: function (data) {
                        if(data=="fail"){
                            flag=false;
                            $.alert("请填写正确的防伪码");
                        }
                    }
                })
            })
        }
        if(flag){
            submitcomment();
		}
    }

    $('#uploaderInput4').on('change', function (event) {
        var photokind=4;
        // 1024KB，也就是 1MB
        var maxSize = 10240 * 10240;
        // 最大上传数量
        var maxCount = 2;
        var fileStringBase64;
        var file = event.target.files[0];
        if (file.size > maxSize) {
            //$.weui.alert({text: '图片太大，不允许上传'});
            $.alert("视频太大，不允许上传", "警告！");
            return;
        }
        if (parseInt($('.photonum4').text()) >= maxCount) {
            $.alert("最多只能上传"+maxCount+"个视频");
            return;
        }
        $.showLoading("正在加载...");
        var reader = new FileReader();
        reader.readAsDataURL(file,"UTF-8");
        reader.onload=function(){
            fileStringBase64 = this.result;
            var num = parseInt($('.photonum4').text())+1;
            if($(".updatevideo4").find("video").length==0){
                $preview=$('<li class="updatevideo4" style="position: relative;display: inline-block;height: 200px;width: 100px;margin-right: 30px">' +
                    '<video style="width: 100px;height: 180px" class="videokind countkind videokind4" autoplay="autoplay">' +
                    '<source src="' + fileStringBase64 + '"/></video>' +
                    '<span style="font-size: 12px;position: absolute;left: 0;bottom: 0">' +
                    '施工前<i class="weui-icon-delete"  onclick="delvideo(this)"></i>' +
                    '</span>' +
                    '</li>');
                $('#uploaderFiles4').append($preview);
            } else if($(".updatevideo5").find("video").length==0){
                $preview=$('<li class="updatevideo5" style="position: relative;display: inline-block;height: 200px;width: 100px;margin-right: 30px">' +
                    '<video style="width: 100px;height: 180px" class="videokind countkind videokind5" autoplay="autoplay">' +
                    '<source src="' + fileStringBase64 + '"/></video>' +
                    '<span style="font-size: 12px;position: absolute;left: 0;bottom: 0">' +
                    '施工后<i class="weui-icon-delete" onclick="delvideo(this)"></i>' +
                    '</span>' +
                    '</li>');
                $('#uploaderFiles4').append($preview);
            }
//            var $preview = $('<li class="weui-uploader__file weui-uploader__file_status videokind'+photokind+'" style="margin-bottom: 19px;background-image:url(' + fileStringBase64 + ')"><i style="margin-top:60px;margin-left:15px" class="weui-icon-delete" onclick="delvideo(this)"></i></li>');

            $('.photonum'+photokind).text(num);
            $.hideLoading();
        };
    });

    function delvideo($this) {
        $.confirm({
            title: '确认删除',
            text: '删除后不可撤回，请问是否继续删除',
            onOK: function () {
                $.showLoading('正在删除...');
                var picid=$($this).closest("li").find("video").data("picid");
                if(picid!=undefined) {
                    $.ajax({
                        url: "/sale/delsalepic?picid="+picid,
                        type: 'POST',
                        async: false,//同步提交，等ajax代码执行后再往下执行代码
                        contentType: 'application/json',
                        success: function (data) {
                            var photokind=4;
                            $($this).closest("li").remove();
                            var num=parseInt($(".photonum"+photokind).text())-1;
                            $(".photonum"+photokind).text(num);
                            $("#gallery").fadeOut(100);
                        },
                        error: function (data) {
                            $.alert("删除图片失败,请重试");
                        }
                    });
                } else {
                    var photokind=4;
                    $($this).closest("li").remove();
                    var num=parseInt($(".photonum"+photokind).text())-1;
                    $(".photonum"+photokind).text(num);
                    $("#gallery").fadeOut(100);
                }
                $.hideLoading();
            },
            onCancel: function () {
            }
        });
    }

    /*提交*/
    function submitcomment() {
        $.showLoading("正在上传...");
        var num=$(".countkind").length;
        var count=0;
        var list1=[];
        var list2=[];
        var list3=[];
        var list4=[];
        var list5=[];
        var list6=[];
        var list7=[];
        var list8=[];
        var list9=[];
        var listfwcode=[];
        if(num==0){
            submit()
        }
        function submit() {
            $(".fwcode").each(function () {
                listfwcode.push($(this).val());
            });
            $.showLoading("正在保存...");
            var serv = $("#serv").data("values");
            var carno = $("#carno").val();
            var cartype = $("#cartype").val();
            var waternum = $("#waternum").val();
            var data = {
                textarea: $("#textarea").val(),
                serv: serv,
                carno: carno,
                cartype: cartype,
                waternum: waternum,
                list1: list1,
                list2: list2,
                list3: list3,
                list4: list4,
                list5: list5,
                list6: list6,
                list7: list7,
                list8: list8,
                list9: list9,
                listfwcode: listfwcode
            };
            console.log(data);
            mui.ajax('/sale/savesale',{
                data:{
                    info:JSON.stringify(data)
                },
                async:false,
                dataType:'text',//服务器返回json格式数据
                type:'get',//HTTP请求类型
                success:function(data){
                    if(data=="success"){
                        $.alert("保存成功!");
                        location.href="/sale/order";
                    }
                },
                error:function (data) {
                    $.alert("保存失败，请重试!");
                    $.hideLoading();
                    console.log(data);
                }
            });
        }
        var date = new Date();
        var time = date.toLocaleTimeString();
        $(".videokind4").each(function () {
            $.showLoading("正在上传视频...");
            var obase64 = $(this).find("source").attr("src");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = "video" + time + 4;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/video/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list4.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传视频失败,请重试");
                }
            });
        });
        $(".videokind5").each(function () {
            $.showLoading("正在上传视频...");
            var obase64 = $(this).find("source").attr("src");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = "video" + time + 5;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/video/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list5.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传视频失败,请重试");
                }
            });
        });
        var i1=0;
        $(".filekind1").each(function () {
            i1++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 1 + i1;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list1.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });
        var i2=0;
        $(".filekind2").each(function () {
            i2++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 2 + i2;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list2.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });
        var i3=0;
        $(".filekind3").each(function () {
            i3++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 3 + i3;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list3.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });
        var i6=0;
        $(".filekind6").each(function () {
            i6++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 6 + i6;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list6.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });
        var i7=0;
        $(".filekind7").each(function () {
            i7++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 7 + i7;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list7.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });
        var i8=0;
        $(".filekind8").each(function () {
            i8++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 8 + i8;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list8.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });
        var i9=0;
        $(".filekind9").each(function () {
            i9++;
            $.showLoading("正在上传图片...");
            var obase64 = $(this).css("background-image");
            var base64 = obase64.split(",");
            var hhhbase64 = base64[0].split("/");
            var hhbase64 = hhhbase64[1].split(";");
            var type = hhbase64[0];
            var data = base64[1];
            var filename = time + 9 + i9;
            var updata = {
                "data": data,
                "fileName": filename, //文件名称
                "type": type //图片格式
            };
            //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            $.ajax({
                url: "http://apis.ikartek.com/v1/imageservice/image/upload",
                type: 'POST',
                data: JSON.stringify(updata),
                contentType: 'application/json',
                success: function (data) {
                    console.log(data);
                    list9.push(data.data);
                    count++;
                    if(count==num){
                        submit();
                    }
                },
                error: function (data) {
                    console.log(data);
                    $.hideLoading();
                    $.alert("上传图片失败,请重试或更换图片");
                }
            });
        });

    }

</script>
</html>
